<template>
  <div class="m-4 mr-0 overflow-hidden bg-white">
    <Card :bordered="false" size="small" title="帮助分类">
      <BasicTree
        :clickRowToExpand="false"
        :treeData="treeData"
        treeWrapperClassName="h-[calc(100%-35px)] overflow-auto"
        @select="handleSelect"
      />
    </Card>
  </div>
</template>
<script lang="ts" setup>
  import { ref } from 'vue';
  import { Card } from 'ant-design-vue';
  import { BasicTree, TreeItem } from '@/components/Tree';

  const emit = defineEmits(['select']);
  const treeData = ref<TreeItem[]>([
    {
      key: 1,
      title: '公司简介',
    },
    {
      key: 2,
      title: '帮助中心',
    },
  ]);

  function handleSelect(keys) {
    emit('select', keys[0]);
  }
</script>
